<template>
    <div class="common-layout">
    <el-container>
    


      <el-header>
        <Header/>
      
      </el-header>
      <el-main>
        <Main/>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Header from '@/homelayout/header/index.vue'
import Main from '@/homelayout/main/index.vue'


</script>

<style lang="scss" scoped>



.el-header {
background:  #e0e1e3;
width: 100vw;
height: 5vh;
}
.el-main {
background: hsl(220, 33%, 98%);
width: 100vw;
height: 100vh;

}

common-layout{

  /* 使容器全屏，可以使用 fixed, absolute, sticky 等，根据需求选择 */  
  position: relative; /* 或 fixed, absolute 等 */  
  width: 100%;  
  height: 100vh; /* 视口高度 */  
  display: flex; /* 使用flex布局 */  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中，如果需要的话 */ 

}



</style>